<template>
  <el-dialog
    title="添加品牌"
    custom-class="brand-dialog"
    :visible="visible"
    :before-close="toggleBrandDialog">
    <el-form :model="form" :rules="rules" label-width="142px" ref="form" v-bind="getFormProps()">
      <el-form-item
        label="品牌名称："
        prop="brandName"
        :rules="[
          { required: !0, message: '请输入品牌名称'}
        ]">
        <el-input v-model="form.brandName" :maxlength="20" placeholder="请输入品牌名称"/>
      </el-form-item>
      <el-form-item
        label=" 品牌图片："
        prop="brandImg"
        :rules="[
          { required: !1}
        ]">
        <e-img-upload v-model="form.brandImg" :limit="1" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="toggleBrandDialog">取 消</el-button>
      <el-button type="primary" @click="handleBrandSave()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
  import EImgUpload from '@e-ui/ImgUpload'
  import serviceApi from 'api/service'
  import {form} from 'utils/mixins' // 引入form mixin
  export default {
    mixins: [form],
    components: {
      EImgUpload
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      cateCode () {
        return this.$route.query.cateCode
      }
    },
    data () {
      return {
        rules: {},
        form: {
          brandName: '',
          brandImg: ''
        }
      }
    },
    methods: {
      toggleBrandDialog () {
        // 添加品牌
        this.form.brandName = ''
        this.form.brandImg = ''
        this.resetForm()
        this.$emit('update:visible', !this.visible)
      },
      handleBrandSave () {
        // 保存品牌
        this.validate(() => {
          let subData = {
            cateCode: this.cateCode,
            brandName: this.form.brandName,
            brandLogo: this.form.brandImg
          }
          serviceApi.addBrand(subData, {
            context: this,
            successMsg: '添加品牌成功'
          }).then(({data}) => {
            this.$emit('change', Object.assign({}, subData, {
              brandCode: data
            }))
            this.toggleBrandDialog()
          })
        })
      }
    }
  }
</script>
